<template>
  <div class="Help" style="min-height:700px">
    <p class="title">
      <el-input
        :placeholder="$t('message.entercontent')"
        style="width: 300px;"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
      </el-input>
    </p>

    <ul class="msgList">
      <li v-for="(item,index) in list" :key = "index">
        <!-- <p>{{ item.title }}</p> -->
        <a :href="item.src">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
// import { getAllHelpCat, getCatAndContentList } from "../api/api";
export default {
  data() {
    return {
      input3: "",
      titleList: [],
      mainList: [],
      list: [
        {title:"出入金流程",src:"https://www.dupont-ex.com/pdf/CashInAndOut.pdf"},
        {title:"交易规则介绍",src:"https://www.dupont-ex.com/pdf/ProductTrading.pdf"}
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getAllHelpCat().then(res => {
        this.titleList = res.data.data;
      });
      getCatAndContentList().then(res => {
        this.mainList = res.data.data;
      });
    },
    search() {
        if(this.input3 == ''){
            this.$message.error({
                message: "请先输入要搜索的帮助内容！"
            });
            return false
        }
      this.$router.push({
        path: "/search",
        query: {
          searchMsg: this.input3
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Help {
  margin: 80px auto;
  background: #fff;
  margin-top: 0px; 
  min-width: 700px;
  .msgList {
    width: 60%;
    margin-left: 20%;
    padding-top:80px;
    li {
      width: 40%;
      float: left;
      height: 50px;
      border: 1px solid #e6e6e6;
      margin: 15px;
      border-radius: 5px;
      a {
        display: block;
        line-height: 50px;
        width: 100%;
        padding-left: 50px;
        color: #333
        // text-align: center;
      }
    }
  }
  .title {
    line-height: 200px;
    font-size: 20px;
    background: #232546;
    text-align: center;
  }
  
  .main {
    width: 1200px;
    margin: 20px auto;
    > li {
      height: 270px;
      float: left;
      width: 50%;
      overflow: hidden;
      > p {
        padding-left: 20px;
        line-height: 30px;
        font-weight: 700;
        color: #2d2f56;
        font-size: 18px;
      }
      ul {
        padding: 10px 50px;
        li {
          height: 40px;
          p {
            line-height: 39px;
            color: #8c979d;
            border-bottom: 1px solid #f2f2f2;
          }
        }
      }
    }
  }
}
</style>